@media screen and (max-width: 1366px){
    .json-map {
        .search {
            top: 40px;
            left: 10px;
        }
        .region-name {
            left: 10px;
            font-size: 24px;
            line-height: 30px;
            >i {
                width: 5px;
                height: 5px;
                margin: 15px 5px;
            }
        }
        .restoration {
            right: 10px;
        }
    }
}
@media screen and (min-width: 1367px){
    .json-map {
        .search {
            top: 60px;
            left: 20px;
        }
        .region-name {
            left: 20px;
            font-size: 30px;
            line-height: 40px;
            >i {
                width: 7px;
                height: 7px;
                margin: 20px 5px;
            }
        }
        .restoration {
            right: 20px;
        }
    }
}
.json-map {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    .region-name {
        display: flex;
        position: absolute;
        top: 0;
        z-index: 1;
        user-select: none;
        letter-spacing: 2px;
        >i {    
            display: inline-block;
            background: #fff;
            border-radius: 100%;
        }
        span {
            display: block;
            &.is-click {
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    
    .restoration {
        display: none;
        position: absolute;
        top: 0;
        width: 35px;
        height: 35px;
        background-color: rgba(75, 82, 94, 0.25); 
        cursor: pointer;
        border-radius: 50%;
        color: #eee;
        font-size: 20px;
        text-align: center;
        line-height: 35px;
        z-index: 2;
        user-select: none;
    }
    .chart-cont {
        width: 100%!important;
        height: 100%;
        text-align: center;
        top: -30px;
        display: flex;
        justify-content: center;
        >div{
            width: 100%!important;
        }
    }
    .border-chart {
        position: absolute;
        width: 100%;
        height: 100%;
        top: -30px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        >div{
            width: 100%!important;
        }
    }
    .bg-chart {
        position: absolute;
        top: -20px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        >div{
            width: 100%!important;
        }
    }
}